<script>
  /*
   * @Author: Zhang Yingying
   * @Date: 2020-10-24 17:37:30
   * @LastEditors: Zhang Yingying
   * @LastEditTime: 2020-11-07 16:52:42
   */

  import Vue from 'vue'
  import Component from 'vue-class-component'
  import { Inject, Prop } from 'vue-property-decorator'
  import RadioGroup from '../components/radio-group.vue'
  import ComboxControl from '../components/combox-control.vue'
  import TextControl from '../components/text-control.vue'
  import CheckboxGroup from '../components/checkbox-group.vue'
  import { isObj } from '../utils'
  @Component({
    name: 'FormControl',
    components: {
      RadioGroup,
      TextControl,
      ComboxControl,
      CheckboxGroup,
    },
  })
  export default class FormControl extends Vue {
    @Prop({
      required: true,
    })
    value

    get prop() {
      return this.$attrs.prop
    }

    @Inject('form')
    form

    options = []

    setValue(value) {
      this.form.$emit('set-value', {
        prop: this.prop,
        value,
      })
      return this
    }

    setAttrs(attrs) {
      this.form.$emit('set-attrs', {
        prop: this.prop,
        attrs,
      })
      return this
    }

    render(h) {
      var { tag, style, getDataList, slots, ...rest } = this.$attrs
      var transformSlots = {}
      isObj(slots) &&
        Object.entries(slots).forEach(([prop, func]) => {
          transformSlots[prop] = () => {
            return func.apply(this, this.$createElement, this.value)
          }
        })

      var tagName = null
      if (tag == 'el-radio-group') {
        tag = 'RadioGroup'
      } else if (tag == 'el-checkbox-group') {
        tag = 'CheckboxGroup'
      } else if (
        ['span', 'p', 'a', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(tag)
      ) {
        tagName = tag
        tag = 'TextControl'
      } else if (tag === 'el-select') {
        tag = 'combox-control'
        rest.type = 'select'
      }
      var options =
        typeof getDataList === 'function' ? this.options : rest.options
      return h(tag, {
        props: {
          ...rest,
          value: this.value,
          options,
        },
        attrs: {
          ...rest,
          tag: tagName,
          options,
        },
        on: {
          ...this.$listeners,
          input: (val) => {
            this.$emit('input', val)
          },
        },
        scopedSlots: {
          //组件在内部的插槽
          // ...transformSlots,
          prefix: (props) => {
            var h = this.$createElement
            return h('span', '12321')
          },
        },
      })
    }

    async reloadControl() {
      var { prop, getDataList } = this.$attrs
      if (typeof getDataList !== 'function') {
        return
      }
      let resp = await getDataList(this.form.model[prop], this.form.model)
      if (Array.isArray(resp)) {
        this.options = resp
      }
    }

    mounted() {
      var { prop } = this.$attrs
      this.form.$emit('ready', prop, this)
      this.reloadControl()
    }
  }
</script>
